<!--
 * @Version: 1.0
 * @Autor:
 * @Date: 2021-03-10 16:57:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-11-15 17:22:17
 * @Description:
-->
<template>
  <el-card class="app-container content_box" shadow="always">
    <div>
      <!-- title -->
      <!-- <div class="header_title_box">
        <h2>物流应付账单管理</h2>
      </div> -->
      <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch" />
      <div class="select_flex">
        <div class="operation_button_box">
          <el-button v-action="'logisticsTransportOrder@importOrder'" size="small" type="success" @click="formVisibleFile=true">导入物流费用</el-button>
          <el-button v-action="'logisticsTransportOrder@createdPayawayOrder'" :disabled="selectedIds.length>0?false:true" size="small" type="success" @click="createdPayawayOrder()">生成付款单</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="small" icon="el-icon-refresh" @click="handleRefresh(true)">刷新</el-button>
        </div>
      </div>

      <div v-loading="loading">
        <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" :max-height="screenHeigh" border fit @selection-change="handleSelectMulti">
          <el-table-column type="selection" width="55" align="center" :selectable="checkSelectable" />
          <el-table-column align="center" label="Tracking Number" prop="transport_order_no" width="185" />
          <el-table-column align="center" label="所属物流公司" prop="logistics_company" width="120" />
          <el-table-column align="center" label="订单编号" prop="order_no" width="150" />
          <el-table-column align="center" label="平台订单编号" prop="platform_order_no" width="150" />
          <el-table-column align="center" label="平台" prop="platform" />
          <el-table-column align="center" label="店铺名称" prop="shop_name" width="150" />
          <el-table-column align="center" label="SKU" prop="sku" width="150" show-overflow-tooltip />
          <el-table-column align="center" label="产品分类" prop="category_name" width="150" show-overflow-tooltip />
          <el-table-column align="center" label="Actual Weight" prop="actual_weight" />
          <el-table-column align="center" label="Billed Weight" prop="billed_weight" />
          <el-table-column align="center" label="zone" prop="zone" />
          <el-table-column align="center" label="Total Amount" prop="total_fee" />
          <!-- <el-table-column align="center" label="导入时间" prop="created_at" width="150" /> -->
          <!-- <el-table-column align="center" label="应付金额" prop="total_fee" /> -->
          <el-table-column align="center" label="基础运费" prop="basics_fee" />
          <el-table-column align="center" label="Fuel surchage/燃油附加费" prop="fuel_surchage" />
          <el-table-column align="center" label="Residential Delivery/住宅地址附加费" prop="residential_delivery" />
          <el-table-column align="center" label="DAS Comm/偏远 地区附加费-商业" prop="DAS_comm" />
          <el-table-column align="center" label="DAS Comm/偏远 地区附加费-住宅" prop="DAS_reis" />
          <el-table-column align="center" label="DAS Extended Comm/超偏远 地区附加费-商业" prop="DAS_extended_comm" />
          <el-table-column align="center" label="DAS  Extended  resi/超偏远 地区附加费-住宅" prop="DAS_extended_reis" />
          <el-table-column align="center" label="AHS/额外处理费" prop="AHS" />
          <el-table-column align="center" label="Peak - AHS Charge" prop="peak_AHS_charge" />
          <el-table-column align="center" label="Oversize Charge/超长超尺寸费" prop="oversize_charge" />
          <el-table-column align="center" label="Peak - Oversize Charge/高峰期超尺寸附加费" prop="peak_oversize_charge" />
          <el-table-column align="center" label="Address Correction/地址修正" prop="address_correction" />
          <el-table-column align="center" label="Unauthorized OS/不可发" prop="unauthorized_OS" />
          <!-- <el-table-column align="center" label="Peak - Unauth Charge" prop="peak_unauth_charge" /> -->
          <el-table-column align="center" label="Courier Pickup Charge/快递取件费" prop="courier_pickup_charge" />
          <el-table-column align="center" label="Print Return Label/打印快递面单费用" prop="print_return_label" />
          <!-- <el-table-column align="center" label="Return Pickup Fee/退件费" prop="return_pickup_fee" /> -->
          <!-- <el-table-column align="center" label="所属发货单" prop="invoice_order_no" width="150" /> -->
          <el-table-column align="center" label="OTHERS" prop="other_fee" />
          <el-table-column align="center" label="申请付款状态" prop="status">
            <template slot-scope="scope">
              {{ scope.row.status===1 ? '待申请': '已申请' }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="付款单号" prop="payaway_order_no" width="170" />
        </el-table>
        <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <!-------- 回到顶部 ------------>
      <el-backtop :visibility-height="60">
        <i class="el-icon-caret-top" />
      </el-backtop>
      <!-- 导入物流 -->
      <ImportDialog url="/logisticsTransportOrders/importOrder" :close-model="false" title="导入物流费用" :form-visible.sync="formVisibleFile" @download="downLoad" @handleRefresh="handleRefresh" />
    </div>
  </el-card>

</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
import ImportDialog from '@/components/importDialog/index.vue'
import { downloadStream } from '@/utils/index'
export default {
  name: 'FinanceSearchLogistics',
  components: { ImportDialog },
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      otherHeight: 400,
      secondUrl: 1, // 二级路由
      componentName: 'FinanceSearchLogistics',
      formVisibleFile: false,
      url: '/logisticsTransportOrder',
      queryParam: {
        transport_order_no: '',
        invoice_order_no: '',
        logistics_company: '',
        start_at: '',
        end_at: '',
        date: ''
      },
      formItems: [
        {
          label: '运单号',
          key: 'transport_order_no',
          type: 'input',
          placeholder: '请输入运单号'
        },
        {
          label: '发货单号',
          key: 'invoice_order_no',
          type: 'input',
          placeholder: '请输入发货单号'
        },
        {
          label: '物流公司',
          key: 'logistics_company',
          type: 'input',
          placeholder: '请输入物流公司'
        },
        {
          label: '操作时间',
          key: 'date',
          type: '',
          //   valueFormat: 'timestamp',
          valueFormat: 'yyyy-MM-dd HH:mm:ss',
          placeholder: '请选择时间范围'
          //   wrap: true
        }
      ],
      loading: false
    }
  },
  methods: {
    // 下载
    downLoad() {
      const vm = this
      vm.$http
        .get('logisticsTransportOrders/template', { responseType: 'blob' })
        .then((res) => {
          downloadStream(res, '物流费用导入模板.xlsx')
        })
    },
    beforeSearch() {
      const vm = this
      vm.queryParam.start_at = ''
      vm.queryParam.end_at = ''
      if (vm.queryParam.date && vm.queryParam.date.length > 0) {
        vm.queryParam.start_at = vm.queryParam.date[0]
        vm.queryParam.end_at = vm.queryParam.date[1]
      }
    },
    checkSelectable(row, index) {
      return row.status === 1
    },
    createdPayawayOrder() {
      const ids = Array.from(new Set(this.selectedLogisticsIds))
      if (ids.length > 1) {
        this.$message.error('请选择同一物流公司物流单进行发货')
      } else {
        const logistics_company = this.data.filter((item) => {
          return item.logistics_id === ids[0]
        })[0]['logistics_company']
        this.$confirm('确认要将选中的数据进行生成付款单吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const data = {}
          data.ids = this.selectedIds
          data.logistics_company = logistics_company
          data.logistics_id = ids[0]
          this.$http.post(`/logisticsTransportOrders/createdPayawayOrder`, data).then((res) => {
            if (res.code === 10000) {
              this.$message.success('付款单生成成功')
              this.handleSearch()
            }
          })
        }).catch(() => { })
      }
    }
  }
}

</script>

<style lang="scss" scoped>
</style>
